<!doctype html>
<html lang='en' ng-app='ShoppingModule'>
<head>
    <title>Shopping Cart</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <link href="bootstrap.css" rel="stylesheet">
</head>

<body ng-controller="ShoppingController">
<h1>Shop!</h1>
<table>
    <tr ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td>{{item.description}}</td>
        <td>{{item.price | currency}}</td>
    </tr>
</table>
<script>
    function ShoppingController($scope, Items) {
        $scope.items = Items.query();
    }

    var shoppingModule = angular.module('ShoppingModule', []);

    // Set up the service factory to create our Items interface to the
    // server-side database
    shoppingModule.factory('Items', function () {
        var items = {};
        items.query = function () {
            // In real apps, we'd pull this data from the server...
            return [
                {title: 'Paint pots', description: 'Pots full of paint', price: 3.95},
                {title: 'Polka dots', description: 'Dots with polka', price: 2.95},
                {title: 'Pebbles', description: 'Just little rocks', price: 6.95}
            ];
        };
        return items;
    });
</script>
</body>
</html>
